<template>
  <ul class="project-list">
    <li class="project-item" v-for="item in 10" :key="item">
      <div class="item flex justify-center align-center" @click="toPage(`/${item}/docs`)">
        <p class="item-name">project-{{ item }}</p>
        <div class="btns">
          <i @click.stop="deleteProject(item)" class="el-icon-delete"></i>
          <i @click.stop="toPage(`/project/settings/${item}`)" class="el-icon-setting"></i>
        </div>
      </div>
    </li>

    <!-- 新建项目按钮 -->
    <li class="project-item new-project">
      <div class="item flex justify-center align-center" @click="toPage('/project/create')">
        <i class="el-icon-plus"></i>&nbsp;
        <div class="item-name">新建项目</div>
      </div>
    </li>
  </ul>
</template>

<script>
import { delete_projects } from "../../api/projects";
export default {
  name: "projectList",
  data: () => ({}),
  methods: {
    // 跳到指定页面
    toPage(path) {
      this.$router.push(path);
    },

    // 删除项目
    deleteProject(item) {
      this.$confirm("删除后无法恢复, 确定要删除该项目吗?")
        .then(async () => {
          // console.info(item);
          let res = await delete_projects(item);
          if (res.status !== 200) {
            this.$message.error(res.msg);
            return;
          }
          this.$message.success(res.msg);
        })
        .catch(Function.prototype);
    },
  },
};
</script>

<style lang="scss" scoped>
.project-list {
  list-style: none;
  .project-item {
    list-style: none;
    display: inline-flex;
    width: 200px;
    height: 120px;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 10px;
    cursor: pointer;
    .item {
      width: 100%;
      height: 100%;
      border: 1px solid #ddd;
      border-radius: 5px;
      position: relative;
      overflow: hidden;
      color: #888;
      &:hover {
        background-color: #ddd;
        .btns {
          display: block !important;
        }
      }
      .btns {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        i {
          &:hover {
            color: $primary;
          }
          margin: 5px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
